<template>
  <div class="replay-control">
    <div class="controls">
      <button @click="goToStart" :disabled="currentMove === -1">
        <span>⏮</span>
      </button>
      <button @click="prevMove" :disabled="currentMove === -1">
        <span>⏪</span>
      </button>
      <button @click="togglePlay">
        <span>{{ isPlaying ? '⏸' : '▶' }}</span>
      </button>
      <button @click="nextMove" :disabled="currentMove === totalMoves - 1">
        <span>⏩</span>
      </button>
      <button @click="goToEnd" :disabled="currentMove === totalMoves - 1">
        <span>⏭</span>
      </button>
    </div>

    <div class="progress">
      <input 
        type="range" 
        :min="-1" 
        :max="totalMoves - 1" 
        v-model="currentMove"
        :disabled="isPlaying"
      >
      <div class="move-info">
        {{ currentMove + 1 }} / {{ totalMoves }}
      </div>
    </div>

    <div class="speed-control">
      <label>速度:</label>
      <select v-model="replaySpeed">
        <option value="0.5">0.5x</option>
        <option value="1">1x</option>
        <option value="2">2x</option>
        <option value="4">4x</option>
      </select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onUnmounted } from 'vue'

const props = defineProps<{
  moves: string[]
}>()

const emit = defineEmits<{
  (e: 'moveChange', index: number): void
}>()

const currentMove = ref(-1)
const isPlaying = ref(false)
const replaySpeed = ref(1)
const playInterval = ref<number | null>(null)

const totalMoves = computed(() => props.moves.length)

const goToStart = () => {
  currentMove.value = -1
  emit('moveChange', -1)
}

const goToEnd = () => {
  currentMove.value = totalMoves.value - 1
  emit('moveChange', currentMove.value)
}

const prevMove = () => {
  if (currentMove.value > -1) {
    currentMove.value--
    emit('moveChange', currentMove.value)
  }
}

const nextMove = () => {
  if (currentMove.value < totalMoves.value - 1) {
    currentMove.value++
    emit('moveChange', currentMove.value)
  }
}

const togglePlay = () => {
  isPlaying.value = !isPlaying.value
  if (isPlaying.value) {
    startAutoPlay()
  } else {
    stopAutoPlay()
  }
}

const startAutoPlay = () => {
  if (playInterval.value) return

  playInterval.value = window.setInterval(() => {
    if (currentMove.value < totalMoves.value - 1) {
      nextMove()
    } else {
      stopAutoPlay()
    }
  }, 1000 / Number(replaySpeed.value))
}

const stopAutoPlay = () => {
  if (playInterval.value) {
    clearInterval(playInterval.value)
    playInterval.value = null
  }
  isPlaying.value = false
}

watch(currentMove, (newValue) => {
  emit('moveChange', newValue)
})

watch(replaySpeed, () => {
  if (isPlaying.value) {
    stopAutoPlay()
    startAutoPlay()
  }
})

onUnmounted(() => {
  stopAutoPlay()
})
</script>

<style scoped>
.replay-control {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.controls button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #4CAF50;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.controls button:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

.controls button span {
  font-size: 20px;
}

.progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress input[type="range"] {
  flex: 1;
}

.speed-control {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.speed-control select {
  padding: 4px;
  border-radius: 4px;
}
</style> 